<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>为你推荐</title>
    <script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
    <style>
        .foryou{
            position: fixed;
            top: 8%;
            right: 5%;
            width: 216px;
            height: 90%;
            overflow: auto;
        }
        .foryou::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
            background-color: #F5F5F5;
        }

        .foryou::-webkit-scrollbar {
            width: 10px;
            background-color: #F5F5F5;
        }

        .foryou::-webkit-scrollbar-thumb {
            background-color: tomato;
            background-image: -webkit-linear-gradient(45deg,
            rgba(255, 255, 255, .2) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, .2) 50%,
            rgba(255, 255, 255, .2) 75%,
            transparent 75%,
            transparent)
        }
        .wnqj{
            color: white;
            border: 0px solid;
            border-radius: 25px;
            margin: 12px 0px;
            padding: 8px 10px;
            background-color: #e34f00;
        }

        .Fimg{
            width: 216px;
            height: 144px;
            overflow: hidden;
        }
        .Fimg img{
            width: 100%;
        }
        .Ftitle{
            font-size: 14px;
            margin-top: -40px;
            background-color: black;
            filter:alpha(Opacity=60);-moz-opacity:0.6;opacity: 0.6;
        }
        .Ftitle a{
            color: white;
        }
        .Ftitle a:link{color: white;}
        .Ftitle a:visited{color: white;}
        .Ftitle a:hover{color: white;}
        .Ftitle a:active{color: white;}

    </style>
    <script type="text/javascript" th:inline="javascript">
        /*<![CDATA[*/
        $(document).ready(function() {
            var xmlhttp;
            xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange=function() {
                if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                    var txt = "";
                    var newsList = JSON.parse(xmlhttp.responseText);
                    for(var i=0;i<newsList.length;i++){
                        txt += "<div>" +
                            "<div class=\"Fimg\">" + newsList[i].img + "</div>";
                        txt += "<div class=\"Ftitle\"><a href=\"/" + newsList[i].id + "\">" + newsList[i].title + "</a></div>";
                        txt += "</div>";
                    }
                    $("#newsforyou").html(txt);
                }
            }
            xmlhttp.open("GET","/foryou",true);
            xmlhttp.send();
        });
        /*]]>*/
    </script>
</head>
<body>
<div class="foryou" th:fragment="foryou">
    <p class="wnqj">为你推荐</p>
    <div id="newsforyou"></div>
</div>
</body>
</html>